<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    input,
    button {
        margin-top: 10px;
    }
</style>

<body>
    <form action="04.html">
        <h3>登陆页面</h3>
        用户名：<input type="text" name="username" id="">
        <br>
        密码：<input type="password" name="password" id="">
        <br>
        <input type="checkbox" name="checkbox" id="">记住我
        <br>
        <button>登录</button>
    </form>
    <script>
        //获取表单
        var form = document.querySelector('form');
        console.log(form);
        //获取表单下的用户名和密码和按钮
        var username = form.elements['username'];
        console.log(username);
        var password = form.elements['password'];
        var btn = document.querySelector('button');
        var remind = form.elements['checkbox'];
        // btn.onclick = function () {
        //     if (username.value === '' || password.value === '') {
        //         alert('请输入你的信息');
        //         return;
        //     }
        //     //将表单提交到index.html
        //     form.action = "index.html";
        //     if (checkbox.checked == true) {
        //         window.localStorage.setItem('username', username.value);
        //     } else {
        //         window.sessionStorage.setItem('username', username.value);
        //     }
        // }
        form.addEventListener('input',function(){
            function getForm(username,password,check){
                //setItem()接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。
                window.localStorage.setItem('username',username);
                window.localStorage.setItem('password',password);
                window.localStorage.setItem('checkbox',check)
            }getForm(username.value,password.value,remind.checked);
        })
        if(localStorage.getItem('checkbox') == 'true'){
            //getItem()接受一个键名（key name）作为参数，并返回对应键名的值
            username.value = localStorage.getItem('username');
            password.value = localStorage.getItem('password');
            remind.checked = localStorage.getItem('checkbox');
        }
    </script>
</body>

</html>